<template>
  <div class="thought__item mt-10">
    <el-collapse accordion v-model="expand">
      <el-collapse-item name="thought">
        <div class="thought__head flex-basic flex-gap-10" slot="title">
          <span class="fs-14 fs-b">深度思考</span>
          <svg-icon
            icon-class="arrow-btn"
            class="fs-14 arrow__btn"
            :class="expand.includes('thought') ? 'expand' : ''">
        </svg-icon>
        </div>
        <div class="thought__body fs-12" v-html="rendererMD(item.target && item.target.thought || '', { mangle: false })"></div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { rendererMD } from '@/utils'
export default {
  name: '',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    rendererMD,
    toggleExpand () {
      this.expand = !this.expand
    }
  },
  data: () => {
    return {
      expand: ['thought']
    }
  }
}
</script>

<style lang="scss" scoped>
.thought__item {
  padding: 10px 20px;
  background: rgba($color: $color-white, $alpha: 0.1);
  color: rgba($color: $color-white, $alpha: 0.7);
  border-radius: 8px;
  .svg-icon {
    color: rgba($color: $color-white, $alpha: 0.7);
  }
  /deep/ .el-collapse-item__arrow {
    display: none;
  }
  .arrow__btn {
    transition: transform 0.3s ease-in-out;
    &.expand {
      transform: rotate(180deg)
    }
  }
}
.thought__body {
  padding: 10px 0 0 0;
  line-height: 2;
}
</style>
